<template>
  <div class="annual-page ">
    <div class="container-content">
      <div class="title">
        <span>专家抽取管理/详情</span>
        <span @click="()=>this.$router.back()" class="back-btn pointer"
          ><img src="../../assets/images/icon_comm_back.png" alt="" />返回</span
        >
      </div>
      <!-- 标题 基本信息-->
      <div class="right-title">
        <img src="../../assets/images/icon_16_title.png" alt="" /> 基本信息
      </div>
      <div class="table-content-box">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="评审任务名称">{{detailsData.taskName}}</el-descriptions-item>
            <el-descriptions-item label="评审类别">{{detailsData['reviewType'] == 0 ? "方案评审" : "年度计划评审"}}</el-descriptions-item>
            <!-- <el-descriptions-item label="评审时间">{{detailsData.reviewTimeStart + "-" + detailsData.reviewTimeEnd}}</el-descriptions-item> -->
            <el-descriptions-item label="评审地点">{{detailsData.reviewAddress}}</el-descriptions-item>            
          </el-descriptions>
      </div>
      <!-- 抽取规则 -->
      <div class="right-title">
        <img src="../../assets/images/icon_16_title.png" alt="" /> 抽取规则
      </div>
      <div class="table-content-box">
        <!-- <div class="add-btn">
                    <img src="../../assets/images/icon_from_add.png" alt="">新增规则
                </div> -->
        <el-table
          :data="tableData"
          border
          v-loading="loading"
          empty-text="暂无数据"
          :max-height="450"
          style="width: 100%"
          >
          <el-table-column type="index" label="序号" align="center" width="65">
          </el-table-column>
          <el-table-column label="抽取类型" prop="extractType" align="center">
            <template slot-scope="scope">
              {{
                scope.row.extractType == 1
                  ? "条件抽取"
                  : scope.row.extractType == 2
                  ? "随机抽取"
                  : "指定专家抽取"
              }}
            </template>
          </el-table-column>
          <el-table-column label="人数" prop="peopleNumber" align="center">
          </el-table-column>
          <el-table-column
            label="抽取规则描述"
            prop="extractRuleDesc"
            align="center"
          >
          </el-table-column>
          <!-- <el-table-column
                    label="操作"
                    align="center">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button type="text" size="small">删除</el-button>
                    </template>
                    </el-table-column> -->
        </el-table>
      </div>
      <!-- 专家确认进程 -->
      <div class="right-title" v-if="editType==3">
        <img src="../../assets/images/icon_16_title.png" alt="" /> 专家确认进程
      </div>
      <div class="confirmed-box" v-if="editType==3">
        <div class="confirmed-content" v-for="(n, i) in infoArrData" :key="i">
          <div class="left-confirmed">
            <div class="left-title">{{ n.expertCourseTime.split(" ")[0] }}</div>
            <div>{{ n.expertCourseTime.split(" ")[1] }}</div>
          </div>
          <div class="right-confirmed">
            <div class="rigth-title">受理人：区大数据局</div>
            <div>{{ n.expertCourseDesc }}</div>
          </div>
          <div class="right_btn">已抽取</div>
          <div class="yuan"></div>
        </div>
        <div class="left-line"></div>
      </div>
      <!-- 专家评价 -->
      <div class="right-title">
        <img src="../../assets/images/icon_16_title.png" alt="" /> 专家评价
      </div>
      <div class="table-content-box">
        <div v-for="(n, i) in informationData" :key="i" style="marginTop:20px">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="姓名" content-class-name="descriptions-item-content-center">{{n.expertName}}</el-descriptions-item>
            <el-descriptions-item label="职称" content-class-name="descriptions-item-content-center">{{n.technicalName}}</el-descriptions-item>
            <el-descriptions-item label="工作单位" content-class-name="descriptions-item-content-center">{{n.workUnit}}</el-descriptions-item>
            <el-descriptions-item label="擅长领域" content-class-name="descriptions-item-content-center">{{n.areasOfExpertise}}</el-descriptions-item>            
          </el-descriptions>
          <el-descriptions title="专家工作情况评论" :column="1" border style="background:#fafafa,margin:0">
            <el-descriptions-item label="职业道德" content-class-name="descriptions-item-content-box">
              <el-rate v-model="n.professionalScore" :disabled="editType==4" @change="changeScore(i,'professionalScore')"></el-rate>
            </el-descriptions-item>
            <el-descriptions-item label="工作态度" content-class-name="descriptions-item-content-box">
              <el-rate v-model="n.workScore" :disabled="editType==4" @change="changeScore(i,'workScore')"></el-rate>
            </el-descriptions-item>
            <el-descriptions-item label="业务水平" content-class-name="descriptions-item-content-box">
              <el-rate v-model="n.businessScore" :disabled="editType==4" @change="changeScore(i,'businessScore')"></el-rate>
            </el-descriptions-item>
            <el-descriptions-item label="总分" content-class-name="descriptions-item-content-box" >
              <!-- <el-input v-model="n.totalScore" 
                disabled
              @input="n.totalScore=n.totalScore.replace(/[^\d^\.]+/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')" 
               maxlength="5" placeholder="请输入内容"></el-input> -->
               {{n.totalScore?n.totalScore + ' / 5.0': 0 +' / 5.0'}}
            </el-descriptions-item>
            <el-descriptions-item label="评价描述" >
              <el-input v-model="n.appraiseDesc" :disabled="editType==4" type="textarea" maxlength="200" placeholder="请输入内容"></el-input>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        
      </div>
      <!-- 专家确认进程 -->
      <div class="right-title"  v-if="editType==4">
        <img src="../../assets/images/icon_16_title.png" alt="" /> 专家确认进程
      </div>
      <div class="confirmed-box" v-if="editType==4">
        <div class="confirmed-content" v-for="(n, i) in infoArrData" :key="i">
          <div class="left-confirmed">
            <div class="left-title">{{ n.expertCourseTime.split(" ")[0] }}</div>
            <div>{{ n.expertCourseTime.split(" ")[1] }}</div>
          </div>
          <div class="right-confirmed">
            <div class="rigth-title">受理人：区大数据局</div>
            <div>{{ n.expertCourseDesc }}</div>
          </div>
          <div class="right_btn">已抽取</div>
          <div class="yuan"></div>
        </div>
        <div class="left-line"></div>
      </div>
      <!-- 底部按钮操作 -->
      <div class="submit-outBox">
          <el-button size="small" class="btn" @click="()=>this.$router.back()">返回</el-button>
          <el-button
          v-show='editType==3'
            size="small"
            class="btn btn-submit"
            type="primary"
            @click="submitForm"
            v-hasPermi="['expertsdraw:detailsNoEvaluate:sub']"
            >提交</el-button
          >
        </div>
    </div>
  </div>
</template>

<script>
import {
  getDetailByTask,
  getExtractManageDetails,
  getExtInfoList,
  getbatchUpdate
} from "@/api/manage/manage";
export default {
  data() {
    return {
      //抽取规则数据
      tableData: [],
      //专家信息
      informationData: [],
      loading: false,
      detailsData: {}, //页面数据信息
      infoArrData: [], //专家确认进程
      editType:''
    };
  },
  created() {
    if(this.$route.query.way){
      this.editType=this.$route.query.way
    }
    this.getDetails();
  },
  methods: {
    //获取详情
    getDetails() {
      let type = this.$route.query.type;
      let id = this.$route.query.id;
      if (type && type == 1) {
        getDetailByTask(id).then((res) => {
          if (res) {
            this.detailsData = res;
            this.tableData = res.extractRuleList;
            res.extractExpertList.map(item =>{
              if(item.professionalScore){
                item.professionalScore = parseInt(item.professionalScore)
              }else{
                item.professionalScore = 0
              }
              if(item.workScore){
                item.workScore = parseInt(item.workScore)
              }else{
                item.workScore = 0
              }
              if(item.businessScore){
                item.businessScore = parseInt(item.businessScore)
              }else{
                item.businessScore = 0
              }
            })
            this.informationData = res.extractExpertList;
            this.infoArrData = res.expertCourseList;
          }
        });
      } else {
        getExtractManageDetails(id).then((res) => {
          if (res) {
            this.detailsData = res;
            this.tableData = res.extractRuleList;
            res.extractExpertList.map(item =>{
              if(item.professionalScore){
                item.professionalScore = parseInt(item.professionalScore)
              }else{
                item.professionalScore = 0
              }
              if(item.workScore){
                item.workScore = parseInt(item.workScore)
              }else{
                item.workScore = 0
              }
              if(item.businessScore){
                item.businessScore = parseInt(item.businessScore)
              }else{
                item.businessScore = 0
              }         
            })
            this.informationData = res.extractExpertList;
            this.infoArrData = res.expertCourseList;
          }
        });
      }
    },
    changeScore(val,name){
      let informationData=this.informationData
      informationData[val].totalScore= ((informationData[val].professionalScore + informationData[val].workScore + informationData[val].businessScore)/3).toFixed(1)
    },
    //提交表单
    submitForm(){
      console.log(this.informationData)
      let extractExperEditDto=[]
        this.informationData.map(item =>{
          let obj = {}
          obj.extractExpertId=item.extractExpertId
          obj.professionalScore=item.professionalScore
          obj.workScore=item.workScore
          obj.businessScore=item.businessScore
          obj.totalScore=item.totalScore
          obj.appraiseDesc=item.appraiseDesc
          extractExperEditDto.push(obj)
        })
        let pass = extractExperEditDto.every(item => !(item.professionalScore == 0 || !item.professionalScore || item.workScore == 0 || !item.workScore || item.businessScore == 0 || !item.businessScore))
        if (!pass) return this.$message.error(`请给专家工作情况打分`)
        getbatchUpdate(extractExperEditDto,this.$route.query.id).then(res =>{
          if(res.code==200){
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.$router.back()
          }
        })
    },
    open() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.annual-page {
  width: 100%;
  background: #f5f5f5;
  padding: 16px;
  .container-content {
    padding: 24px;
    background: #fff;
    .title {
      font-size: 18px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      color: #000000;
      line-height: 18px;
      text-align: left;
      display: flex;
      justify-content: space-between;
      .back-btn {
        margin-right: 56px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #333333;
        display: flex;
        align-items: center;
        img {
          margin-right: 7px;
        }
      }
    }
    .table-content-box {
      // width:1600px;
      .add-btn {
        width: 110px;
        height: 32px;
        background: #3171ee;
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #fff;
        display: flex;
        align-items: center;
        margin-bottom: 24px;
        cursor: pointer;
        img {
          margin: 0 7px 0 17px;
          width: 14px;
          height: 14px;
        }
      }
    }
  }
  .table-box {
    margin: 24px 0;
    // height:48px;
    display: flex;
    flex-wrap: wrap;
    // width:1600px;
    & > :first-child {
      span {
        border-bottom: none;
      }
    }
    & > :nth-child(2) {
      span {
        border-bottom: none;
      }
    }
    & > div {
      width: 50%;
      display: flex;
      align-items: center;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: CENTER;
      color: #666666;
    }
    .table-header {
      display: inline-block;
      width: 50%;
      height: 48px;
      background: #fafafa;
      line-height: 48px;
      text-align: center;
      border: 1px solid #ebebeb;
    }
    .table-body {
      display: inline-block;
      width: 50%;
      height: 48px;
      border: 1px solid #ebebeb;
      border-left: 0;
      text-indent: 24px;
      line-height: 48px;
    }
  }
  .right-title {
    // width: 1600px;
    height: 50px;
    line-height: 50px;
    display: flex;
    align-items: center;
    border: 1px solid #ebecef;
    border-right: 0;
    border-left: 0;
    margin: 24px 0;
    img {
      margin-right: 6px;
    }
  }
  .confirmed-box {
    // width:1600px;
    border-left: 1px solid #ebecef;
    position: relative;
    .confirmed-content {
      margin-left: 56px;
      // width: 1543px;
      height: 82px;
      padding: 16px 24px;
      background: #fafafa;
      border-radius: 4px;
      display: flex;
      position: relative;
      margin-top: 30px;
      .left-confirmed {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: LEFT;
        color: #999999;
        width: 226px;
        .left-title {
          font-weight: 400;
          color: #333333;
          margin-bottom: 10px;
        }
      }
      .right-confirmed {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        text-align: LEFT;
        color: #333333;
        .rigth-title {
          margin-bottom: 10px;
          font-family: PingFang SC, PingFang SC-Regular;
        }
      }
      .right_btn {
        width: 74px;
        height: 32px;
        background: #ebf6ec;
        border-radius: 4px;
        position: absolute;
        right: 24px;
        line-height: 32px;
        color: #fff;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #33a83d;
      }
      .yuan {
        width: 14px;
        height: 14px;
        background: #ffffff;
        border: 3px solid #d0e2fb;
        border-radius: 50%;
        position: absolute;
        left: -63px;
        top: 0;
      }
    }
    .left-line {
      position: absolute;
      height: 68px;
      left: -1px;
      bottom: 0;
      width: 1px;
      background-color: #fff;
    }
  }
  .el-table__header {
    text-align: center;
  }
  // .el-dialog {
  //     height: 100%;
  //     padding-top:30vh;
  // }
}
</style>
<style lang="scss">
.annual-page .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*height:600px;*/
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}
.annual-page .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
  max-height: 400px !important;
}
.annual-page .el-input__inner {
  width: 400px;
}
.annual-page .el-dialog__header {
  border-bottom: 1px solid #ebecef;
}
.annual-page .el-dialog__footer {
  border-top: 1px solid #ebecef;
}
.info-select .el-input__inner {
  width: 160px !important;
}
/* 底部按钮操作 */
.submit-outBox {
  margin-left: 0;
  padding-top: 48px;
  width: 100%;
  text-align: center;
  border-top: 1px solid #ebecef;
  .btn {
    width: 196px;
    height: 40px;
    margin-right: 10px;
  }
  .btn-submit {
    background: #0d72ff;
  }
  .btn-save {
    border: 1px solid #3171ee;
    color: #3171ee;
    background: #fff;
  }
  .el-form-item__content {
    margin-left: 0 !important;
  }
}
/* 描述信息样式修改 */ 
.table-content-box{
  .el-descriptions__header{
    justify-content: center;
    height:48px;
    line-height: 48px;
    // margin-top: 15px;
    margin-bottom: 0px;
    background:#FAFAFA;
  }
  .el-descriptions__title {
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    color: #666666;
  } 
  .el-descriptions-item__label{
    width:400px;
    text-align: center !important;
  }
  .descriptions-item-content-center{
    text-align: center !important;
  }
  .el-input{
    text-align: left;
  }
  .el-input__inner{
    border: none;
  }
  .el-textarea__inner{
    border: none;
  }
  .el-rate{
    text-align: left !important;
  }
  .descriptions-item-content-box{
    text-align: left !important;
  }
}
</style>
